<template>
	<view>
		<cu-custom bgColor="bg-rgb" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新增制具清洗</block>
		</cu-custom>
		<form>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.1 + 's'}]">
				<view class="title">清洗人</view>
				<view class="">
					{{myFormData.cleanPerson}}
				</view>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.2 + 's'}]">
				<view class="title">清洗时间</view>
				<view class="" @click="start">
					{{startString}}
				</view>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.3 + 's'}]">
				<view class="title">制具SN</view>
				<input :focus="focus_index == 0" placeholder="请输入制具SN" name="input" type="text" v-model="myFormData.maketoolSn"
				 @confirm="focusNextInput(0)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.4 + 's'}]">
				<view class="title">制具名称</view>
				<input :focus="focus_index == 1" placeholder="请输入制具名称" name="input" type="text" v-model="myFormData.maketoolName"
				 @confirm="focusNextInput(1)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.5 + 's'}]">
				<view class="title">制具料号</view>
				<input :focus="focus_index == 2" placeholder="请输入制具料号" name="input" v-model="myFormData.maketoolCode" @confirm="focusNextInput(2)"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: 0.6 + 's'}]">
				<view class="title">制具类型</view>
				<input :focus="focus_index == 3" placeholder="请输入制具类型" name="input" type="text" v-model="myFormData.maketoolType"
				 @confirm="focusNextInput(3)"></input>
			</view>
			<view class="padding flex flex-direction animation-slide-bottom" :style="[{animationDelay: 0.9 + 's'}]">
				<button class="cu-btn bg-rgb lg" @click="onSubmit">添加</button>
			</view>
		</form>

		<w-picker :visible.sync="visible" mode="date" startYear="2017" endYear="2229" :value="myFormData.cleanTime" :current="true"
		 fields="second" @confirm="onConfirm($event,'start')" @cancel="onCancel" :disabled-after="false" ref="date"></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				myFormData: {
					cleanPerson: uni.getStorageSync('login_user_info').realname, // 清洗人
					cleanTime: '', // 开始时间
					maketoolCode: '', // 制具料号
					maketoolName: '', // 制具名称
					maketoolSn: '', // 制具SN
					maketoolType: '' // 制具类型
				},
				startString: '请选择清洗开始时间',
				visible: false,
				focus_index: -1
			};
		},
		onLoad: function(option) {},
		methods: {
			focusNextInput(index) {
				// this.index = index
				if (index == 0) {
					if (this.myFormData.maketoolSn.replace(/\s+/g, "") == '') {
						// this.$tip.error('制具SN不能为空')
            this.modal.show({ type:'error', content:'制具SN不能为空' })
						return
					}
					let data = {
						pageNo: 1,
						pageSize: 1,
						maketoolSn: this.myFormData.maketoolSn
					}
					this.$http.get('chiefdata/mesChiefdataMaketool/list', {
						params: data
					}).then(res => {
						console.log(res)
						if (res.data.success) {
							// this.list = res.data.result.records[0]
							this.myFormData.maketoolCode = res.data.result.records[0].maketoolCode
							this.myFormData.maketoolName = res.data.result.records[0].maketoolName
							this.myFormData.maketoolType = res.data.result.records[0].maketoolType
						} else {
							// this.$tip.error(res.data.message)
              this.modal.show({ type:'error', content:res.data.message })
						}
					})
				} else {
					this.focus_index = Number(index) + 1
				}
				if (index == 3) {
					return
				} else {
					this.focus_index = Number(index) + 1
				}
				
			},
			start() {
				this.$refs.date.show()
			},
			onCancel() {},
			onConfirm(e, date) {
				console.log(e, date)
				if (date == 'start') {
					this.startString = e.value
					this.myFormData.cleanTime = e.value
				}
			},
			onSubmit() {
				uni.showModal({
					title: '制具清洗',
					content: '是否添加？',
					cancelText: '取消',
					confirmText: '添加',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '添加中....',
								mask: true
							})
							if (this.myFormData.cleanPerson.replace(/\s+/g, "") == '') {
								// this.$tip.error('清洗人不能为空');
								this.modal.show({ type:'error', content:'清洗人不能为空' })
								return false
							} else if (this.myFormData.cleanTime.replace(/\s+/g, "") == '') {
								// this.$tip.error('开始时间不能为空');
								this.modal.show({ type:'error', content:'开始时间不能为空' })
								return false
							} else if (this.myFormData.maketoolCode.replace(/\s+/g, "") == '') {
								// this.$tip.error('制具料号不能为空');
								this.modal.show({ type:'error', content:'制具料号不能为空' })
								return false
							} else if (this.myFormData.maketoolName.replace(/\s+/g, "") == '') {
								// this.$tip.error('制具名称不能为空');
								this.modal.show({ type:'error', content:'制具名称不能为空' })
								return false
							} else if (this.myFormData.maketoolSn.replace(/\s+/g, "") == '') {
								// this.$tip.error('制具SN不能为空');
								this.modal.show({ type:'error', content:'制具SN不能为空' })
								return false
							} else if (this.myFormData.maketoolType.replace(/\s+/g, "") == '') {
								// this.$tip.error('制具类型不能为空');
								this.modal.show({ type:'error', content:'制具类型不能为空' })
								return false
							}
							console.log(this.myFormData)
							let mesTempratureGraph = this.myFormData
							this.$http.post('produce/mesMaketoolClean/add', mesTempratureGraph).then(res => {
								uni.hideLoading()
								if (res.data.success) {
									// this.$tip.success(res.data.message);
									this.modal.show({ type:'success', content:res.data.message })
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 1000);
								} else {
									// this.$tip.error(res.data.message)
                  this.modal.show({ type:'error', content:res.data.message })
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.btn {
		background-color: rgb(0, 64, 152);
		padding: 10rpx;
		color: white;
		border-radius: 10rpx;
	}

	input {
		text-align: right;
	}
</style>
